(function(){
    Vue.component('page-header', {
        template: '<div class="bgc-fff c-border-b">\
            <div class="bgc-f2f2f2 c-666">\
                <div class="container">\
                    <div class="row ptb10">\
                        <div class="col-md-6">\
                            <div class="bgc-fff pl10 pr20" style="width:360px; height:30px; line-height:30px; border-radius: 15px;">\
                                <img src="../../../images/icon_laba.png" width="20" style="vertical-align: super;" class="mr5">\
                                <span class="c-nowrap c-909090" style="display: inline-block; width: calc(100% - 30px)">[满意度调查]您于2018年2月14日10点30分预约了上饶市第一医院眼科的门诊</span>\
                            </div>\
                        </div>\
                        <div class="col-md-6 c-t-right c-909090" style="line-height: 30px;">\
                            <span v-show="!isLogin" class="plr20 c-border-r">您好,<a :href="loginUrl" class="c-0ad8c8">请登录</a></span>\
                            <a v-show="isLogin" class="plr20 c-border-r" @click="goToCenter">\
                                <img :src="loginInfo.imgRemotePath" width="30" height="30" class="c-images-cycle mr5">\
                                <span class="c-0ad8c8">个人中心</span>\
                            </a>\
                            <span class="plr20 c-border-r" @click="download">下载APP</span>\
                            <a class="plr20 c-909090" @click="logout">安全退出</a>\
                        </div>\
                    </div>\
                </div>\
            </div>\
            <div class="container c-birder-b">\
                <div class="ui-grid ui-grid-middle">\
                    <div class="ui-col-0 ptb30 pr60">\
                        <img src="../../../images/LOGO.png">\
                    </div>\
                    <div class="ui-col-0 pl15">\
                        <span v-for="(item, index) in navList" class="nav-item" :class="{\'active\': index==selectedNav}" @click="chooseNav(index, item.link)">{{item.text}}</span>\
                    </div>\
                    <div class="ui-col-1 ptb10">\
                        <div class="input-group search-box">\
                            <input type="text" class="form-control search-input" v-model="searchText" placeholder="请输入医院、医生姓名">\
                            <span class="input-group-btn">\
                                <img src="../../../images/icon_sousuo.png" width="23">\
                            </span>\
                        </div>\
                    </div>\
                </div>\
            </div>\
        </div>',
        props: [],
        data: function(){
            return {
                isLogin: false,
                searchText: '',
                navList: [{
                    id: 0,
                    text: "首页",
                    link: '../../home/html/index.html',
                    pathname: "home/html/index.html"
                },{
                    id: 1,
                    text: "预约挂号",
                    link: '../../appointment/html/home.html',
                    pathname: "appointment/html/home.html"
                },{
                    id: 2,
                    text: "健康档案",
                    link: '../../',
                    pathname: "health/html/"
                },{
                    id: 3,
                    text: "我的就诊",
                    link: '../../mineJiuZhen/html/mineJiuZhen.html',
                    pathname: "mineJiuZhen/html/mineJiuZhen.html"
                }],
                selectedNav: 0,
                loginInfo: {},
                loginUrl: "../../login/html/login.html",
                userCenterUrl: ""
            }
        },
        mounted: function(){
            //判断页面中是否存在登录信息
            var oauthInfo = window.sessionStorage.getItem("oauthInfo");
            if(oauthInfo){
                this.isLogin = true;
                oauthInfo = JSON.parse(oauthInfo);
                this.loginInfo = oauthInfo;
            }
            
            //判断当前页面是第几个菜单页
            var selectedNav = window.sessionStorage.getItem("selectedNav"),
                pathname = window.location.pathname;
            var obj = _.find(this.navList, function(o){
                    if(pathname.indexOf(o.pathname) > -1){
                        return o;
                    }
                });
            
            if(selectedNav && obj){
                this.selectedNav = obj.id;
                window.sessionStorage.setItem("selectedNav", obj.id);
            }else if(selectedNav && !obj){
                this.selectedNav = selectedNav;
            }
            
        },
        methods: {
            login: function(){
                //跳转到登录页面
            },
            goToCenter: function(){
                //跳转去个人中心页面
                window.location.href = "../../mine/html/personal-info.html";
            },
            logout: function(){
                
            },
            download: function(){
                //下载APP
            },
            chooseNav: function(val){
                window.sessionStorage.setItem("selectedNav", val);
                this.selectedNav = val;
                var url = this.navList[val].link;
                window.location.href = url;
            }
        }
    })
})()